<template>
  <div>
    <div class="tab-wrap">
      <div class="tab-inner">
        <div class="tab-banner">
          <img src="../../assets/finad.jpg" alt />
        </div>
      </div>
      <div class="tab-filter">
        <div
          v-for="(item, index) in card"
          :key="index"
          :class="{ checked: index == n }"
          @click="instructor(item.name, index)"
          class="tab-item"
        >
          <i class="iconfont icon-shunxu3"> {{ item.select }}</i>
        </div>

        <div
          class="tab-item"
          @click="instructor('筛选', 3)"
          :class="{ checked: choice }"
        >
          <i class="iconfont van-icon-shaixuan">筛选</i>
        </div>
      </div>

      <div class="box-cells">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="trainer"
        >
          <van-cell v-for="(item, i) in jiaolian" :key="i">
            <template #icon>
              <div class="coach-grid">
                <div class="nn-icon" v-if="i == 0">
                  <img src="../../assets/n1.png" alt />
                </div>
                <div class="nn-icon" v-else-if="i == 1">
                  <img src="../../assets/n2.png" alt />
                </div>
                <div class="nn-icon" v-else-if="i == 2">
                  <img src="../../assets/n3.png" alt />
                </div>
                <div class="nn" v-else>{{ i + 1 }}</div>
                <img :src="item.photo" class="p-avatar" alt />
              </div>
            </template>
            <template #title>
              <div @click="href('/CoachDetail', item.drillId, item.jgbh)">
                <div class="pl-heading">
                  <div class="pl-name">{{ item.name }}</div>
                  <div class="pl-age">{{ item.jl }}年教龄</div>
                </div>
                <van-rate
                  v-model="item.xj"
                  readonly
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
                />
                <div class="pl-price">￥{{ item.feiyong }}</div>
                <div class="pl-desc">{{ item.inscodename }}</div>
              </div>
            </template>
            <template #right-icon>
              <div class="right-cell">
                <i
                  @click="callPhone(item.phone)"
                  class="iconfont van-icon-tel"
                ></i>
                <p>{{ item.juli | numFilter }}km</p>
              </div>
            </template>
          </van-cell>
        </van-list>
      </div>
    </div>
    <!-- 当点击筛选之后，弹出层 -->
    <van-popup v-model="show" position="top" :style="{ height: '100%' }">
      <van-nav-bar
        :z-index="999"
        :fixed="true"
        left-arrow
        @click-left="onClickLeft"
        :placeholder="true"
        title="搜索"
      ></van-nav-bar>
      <van-search
        v-model="value"
        action-text
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        input-align="center"
        background="#fff"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <!-- 当点击搜索按钮，查询出驾校时 -->
      <div v-if="conceal" class="search-history">
        <van-cell v-for="(item, i) in school" :key="i">
          <template #icon>
            <div class="coach-grid">
              <div class="nn">{{ i + 1 }}</div>
              <img :src="item.photo" class="p-avatar" alt />
            </div>
          </template>
          <template #title>
            <div @click="href('/CoachDetail', item.drillId, item.jgbh)">
              <div class="pl-heading">
                <div class="pl-name">{{ item.name }}</div>
                <div class="pl-age">{{ item.jl }}年教龄</div>
              </div>
              <van-rate
                v-model="item.xj"
                readonly
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
              <div class="pl-price">{{ item.feiyong }}元/小时</div>
              <div class="pl-desc">{{ item.inscodename }}</div>
            </div>
          </template>
          <template #right-icon>
            <div class="right-cell">
              <i
                @click="callPhone(item.phone)"
                class="iconfont van-icon-tel"
              ></i>
              <p>{{ item.juli | numFilter }}km</p>
            </div>
          </template>
        </van-cell>
      </div>
      <div v-else class="screen">
        <!-- 优惠活动 -->
        <div class="students-here">
          <p>驾照类型</p>
          <div class="screen-list">
            <div
              v-for="(item, index) in licensetype"
              :key="index"
              :class="{ select_hue: colorIndex === index }"
              @click="TypeOf(index)"
            >
              {{ item }}
            </div>
          </div>
          <!-- 底部按钮 -->
        </div>
      </div>
      <div v-if="!conceal" class="btn-ensures" @click="confirm">确定</div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { findCoach, globalSSearch, Filtrate } from "../../assets/js/api/apply";
export default {
  name: "FindCoach",
  data() {
    return {
      finished: false,
      loading: false,
      jiaolian: [],
      n: 0,
      card: [
        {
          select: "推荐",
          name: ""
        },
        {
          select: "距离",
          name: "juli"
        },
        {
          select: "价格",
          name: "feiyong"
        }
      ],
      JPagination: 0, // 找教练页数
      precision: null, // 精度
      dimensionality: null, // 维度
      parameter: "", // 用来储存的参数
      rank: "desc", // 排序方式
      choice: false,
      show: false, // 当点击筛选的时候弹出层
      conceal: false, // 当选择驾校的时候
      value: "", // 筛选中的输入框
      school: [], // 筛选中搜索后查询出的驾校
      // 驾校类型
      licensetype: ["C1/C2/C3", "A1/A2", "B1/B2", "D/E/F"],
      colorIndex: -1,
      vehicle: 0
    };
  },

  mounted() {
    this.getGpsLocation();
  },

  methods: {
    confirm() {
      this.lists = [];
      if (this.conceal) {
        this.jiaolian = this.school;
        this.choice = true;
        this.show = false;
      } else {
        let obj = {
          cx: this.vehicle,
          orderByColumn: this.parameter,
          isAsc: this.rank,
          jd: this.precision,
          wd: this.dimensionality
        };
        // console.log(obj);
        Filtrate(obj).then(res => {
          if (res.data.length == 0) {
            Toast("未查询到有关教练");
            return;
          }
          // console.log(res);
          this.choice = true;
          this.jiaolian = res.data;
          this.show = false;
        });
      }
    },

    // 当点击驾照类型的时候执行的操作
    TypeOf(index) {
      if (this.colorIndex != index) {
        this.colorIndex = index;
        this.vehicle = index + 1;
      } else {
        this.colorIndex = -1;
        this.vehicle = 0;
      }
    },
    onSearch() {
      // 类型默认的是驾校，当搜索内容是空的时候，提示内容
      if (this.value == "") {
        Toast("请输入搜索内容");
        return;
      }
      // console.log(this.classify);
      // console.log(this.value);
      let obj = {
        type: 2,
        keyWord: this.value,
        jd: this.precision,
        wd: this.dimensionality
      };
      globalSSearch(obj).then(res => {
        if (res.data.length == 0) {
          Toast("未查询到有关教练");
          return;
        }
        // console.log(res);
        this.conceal = true;
        this.school = res.data;
      });
    },

    // 当单击总榜，距离，价格时触发
    // if(){}
    instructor(lid, index) {
      // console.log(`点击了lid：${lid},触发了index：${index}`);
      this.finished = false;
      this.jiaolian = [];
      this.JPagination = 0;
      this.parameter = "";
      this.choice = false;
      // console.log(lid);
      // 判断是否点击当前的按钮
      this.n = index; //改变this指向app
      if (lid === "") {
        // this.lists = [];
        // console.log("bbb");
        this.rank = "desc";
        // console.log("总榜")
        this.parameter = lid;
        this.trainer();
      } else if (lid == "juli") {
        this.parameter = lid;
        this.rank = "asc";
        this.trainer();
        // console.log("距离")
      } else if (lid == "筛选") {
        // console.log(lid);
        this.colorIndex = -1;
        this.show = true;
        this.trainer(lid);
      } else {
        this.parameter = lid;
        this.rank = "asc";
        this.trainer();
        // console.log("价格")
      }
    },
    // 找教练
    trainer(lid) {
      // console.log(lid);
      if (lid == undefined) {
        // console.log("调用");
        let pageSize = 10;
        let pageNum = this.JPagination + 1;
        this.JPagination++;
        let obj = {
          pageSize: pageSize,
          pageNum: pageNum,
          orderByColumn: this.parameter,
          isAsc: this.rank,
          jd: this.precision,
          wd: this.dimensionality
        };
        // console.log(obj);
        findCoach(obj).then(res => {
          // console.log(res);
          let extent;
          let list = res.data;
          // console.log(list);
          for (let i = 0; i < list.length; i++) {
            this.jiaolian.push(list[i]);
            extent = list[i].totalcount;
          }
          // console.log(this.jiaolian)
          this.loading = false;

          if (this.jiaolian.length >= extent) {
            this.finished = true;
            // console.log("finished");
          }
        });
      } else {
        // console.log("未调用");
        this.finished = true;
      }

      // 调通手机号码，实现打电话功能
    },
    getGpsLocation() {
      let jd = sessionStorage.getItem("jd");
      let wd = sessionStorage.getItem("wd");

      if (
        null == jd ||
        null == wd ||
        0 == jd ||
        0 == wd ||
        "null" == jd ||
        "null" == wd ||
        "0" == jd ||
        "0" == wd
      ) {
        let _this = this;
        let dsBridge = require("dsbridge");
        dsBridge.call("tellHtml_loc", "", function(data) {
          var jwd = "";
          try {
            jwd = JSON.parse(data);
          } catch (err) {
            _this.getGpsLocation();
          }
          // Toast(jwd)
          if (jwd == "") {
            sessionStorage.setItem("jd", "114.495438");
            sessionStorage.setItem("wd", "38.040065");
            sessionStorage.setItem("city", "湘潭市");
            sessionStorage.setItem("LocationCity", "正在定位");
          } else {
            sessionStorage.setItem("jd", jwd.lgt);
            sessionStorage.setItem("wd", jwd.lat);
            sessionStorage.setItem("city", jwd.city);
            sessionStorage.setItem("LocationCity", jwd.address);
          }
          this.getGpsLocation();
        });
      } else {
        if (null != jd) {
          this.precision = jd; // 精度
        }
        if (null != jd) {
          this.dimensionality = wd; // 维度
        }
      }
    },
    href(url, lid, id) {
      // console.log("我是驾校：" + id);
      if (id) {
        this.$router.push({
          path: `${url}/${lid}/${id}`
        });
      } else {
        this.$router.push({ path: `${url}/${lid}` });
      }
    },
    onClickLeft() {
      this.show = false;
      this.value = "";
    },
    // 调通手机号码，实现打电话功能
    callPhone(phoneNumber) {
      window.location.href = "tel://" + phoneNumber;
      // console.log(this.Phone);
    }
  },

  filters: {
    numFilter(value) {
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        // 截取当前数据到小数点后两位
        realVal = parseFloat(value).toFixed(2);
      } else {
        realVal = "--";
      }
      return realVal;
    }
  }
};
</script>

<style></style>
